/**
 * 水球类
 */

 export default class {
     constructor(level){
        // 等级状态
        this.level = level;
        this.div = null;
        this.img = null;
        // 当前对象的自定义属性，不是原生的click事件
        this.onclick = function(){};
        this.onboom = function(){};

        this.left = 0;
        this.top = 0;
        this.width = 100;
        this.height = 100;

        
     }
     /**
      *绘制当前的水球到指定的容器中
      *
      */
     draw(wrap){
        this.div = document.createElement('div');
        this.div.classList.add('water-polo');
        this.img = document.createElement('img');
        this.img.src = "img/" + this.level + ".png";
        this.div.appendChild(this.img);
        //  = this.levelUp.bind(this);
        this.div.onclick =  () => {
            // 当div被点击的时候去执行自定义的事件
            typeof this.onclick === 'function' && this.onclick();
        };

        // 当动画执行完成后去除动画
        this.img.addEventListener('animationend',() => {
            this.img.classList.remove('level-up');
        });

        wrap.appendChild(this.div);

        this.left = this.div.offsetLeft;
        this.top = this.div.offsetTop;
     }
     /**
      * 升级
      */
     levelUp(){
         this.level++;
         if(this.level > 4){
            this.level = 0;

            // 爆炸了，分裂出来4个小水滴- Bullte
            typeof this.onboom === 'function' && this.onboom();
         }
        //  加上升级小动画
         this.img.classList.add('level-up');
         this.img.src = "img/" + this.level + ".png";
     }
 }